<template>
	<div>
		<m-table name="admin-role-client" :action="action" :search="search" ref="table">
			<el-table-column label="姓名" prop="name" width="120" />
			<el-table-column label="头像" width="130">
				<template slot-scope="scope">
					<el-avatar :src="scope.row.avatar" fit="contain"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column label="手机号" prop="phone" width="140" />

			<el-table-column label="信息完善" prop="state" width="120">
				<template slot-scope="scope">{{ scope.row.bindInformation ? '已完善' : '未完善' }}</template>
			</el-table-column>

			<el-table-column label="评分" prop="state" width="120">
				<template slot-scope="scope">{{ sources[getSource(scope.row)]  }}</template>
			</el-table-column>

			<el-table-column label="分配客服" prop="state" width="120">
				<template slot-scope="scope">{{ scope.row.bindService ? '已分配' : '未分配' }}</template>
			</el-table-column>

			<el-table-column label="注册时间" prop="created" />

			<el-table-column label="打分" prop="state" width="90">
				<el-button size="mini" type="success" :disabled="getSource(scope.row) > 0" @click="showSource(scope.row)" slot-scope="scope">打分</el-button>
			</el-table-column>

			<el-table-column label="详情" prop="state" width="90" fixed="right">
				<el-button size="mini" type="success" @click="view(scope.row)" slot-scope="scope">详情</el-button>
			</el-table-column>
		</m-table>

		<el-dialog title="打分" :visible.sync="showSourcePanel" width="80%">
			<el-form>
				<el-form-item label="姓名:">
					<span>{{ current.realName || '未填写' }}</span>
				</el-form-item>

				<el-form-item label="年龄:">
					<span>{{ current.phone || '未填写' }}</span>
				</el-form-item>

				<el-form-item label="生日:">
					<span>{{ current.birthday || '未填写' }}</span>
				</el-form-item>

				<el-form-item label="性别:">
					<span>{{ current.sex == 0 ? '女' : '男' }}</span>
				</el-form-item>

				<el-form-item>
					<el-avatar shape="square" :size="200" fit="fill" :src="current.leftFaceImg"></el-avatar>
					<el-avatar shape="square" style="margin-left: 20px" :size="200" fit="fill" :src="current.mainFaceImg"></el-avatar>
					<el-avatar shape="square" style="margin-left: 20px" :size="200" fit="fill" :src="current.rightFaceImg"></el-avatar>
				</el-form-item>

				<el-form-item label="评分">
					<el-rate v-model="source" show-text :max="3" :texts="texts"> </el-rate>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitSource">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import apiSelect from '@/components/custom/apiSelect';
import request from '@/utils/request';
export default {
	components: {
		apiSelect,
	},
	data() {
		return {
			role: 0,
			sources: ['未评分', '轻微', '中度', '严重'],
			texts: ['轻微', '中度', '严重'],
			showSourcePanel: false,
			source: 0,
			current: {},
			search: [
				{ icon: 'el-icon-mobile', type: 'like', name: 'name', label: '用户姓名', span: 4, value: '' },
				{ icon: 'el-icon-mobile', type: 'like', name: 'phone', label: '联系方式', span: 4, value: '' },
			],
			action: { remove: false, edit: false, add: false, export: false },
		};
	},
	mounted() {
		this.getMyRole();
	},
	methods: {
		getSource(e) {
			if (this.role == 2) return e.dayUserSource;

			if (this.role == 3) return e.nightUserSource;

			if (this.role == 4) return e.expertUserSource;

			return -1;
		},
		view(e) {
			this.$router.push({
				path: '/clientdetail',
				query: {
					id: e.id,
				},
			});
		},
		async getMyRole() {
			this.role = await request.get('admin-account/my-role');
		},
		showSource(e) {
			this.showSourcePanel = true;
			this.current = e;
		},
		async submitSource() {
			const res = await request.post(`admin-client/source/${this.current.id}/${this.source}`);

			this.showSourcePanel = false;

			this.current = {}

			this.source = 0

			this.$refs.table.reload()
		},
	},
};
</script>

<style>
.tag {
	font-size: 10px !important;
}
</style>